import React, { useEffect, useState, useRef } from 'react'
import { Pagination, Button } from 'antd'
import axios from 'axios'
// pagination
// useEffect
const Home = () => {
  const [userInfo, setUseInfo] = useState({})
  const [count, setCount] = useState(0)
  const [opt, setOpt] = useState({ page: 1, size: 5 })
  const page = useRef(0)
  // 处理副作用 http dom 定时器 获取本地存储的值
  // new BetterScroll 回收 {}
  // 定时器 回收
  // 原生事件
  useEffect(() => {
    const info = JSON.parse(window.localStorage.getItem('userInfo'))
    // console.log('userInfo:', info)
    setUseInfo(info)
    // console.log(opt.page, 'page')
    const callback = (e) => {
      // console.log(e.clientX, e.clientY)
    }
    let timer = setInterval(() => {
      setOpt(() => {
        return { ...opt, page: opt.page + 1 }
      })
    }, 1000)
    console.log('外部timer', timer, 'timer')
    // window.addEventListener('mousemove', callback)
    return () => {
      console.log('清空内部的:', timer, 'timer')
      clearInterval(timer)
      // window.removeEventListener('mousemove', callback)
    }
  }, [opt.page])
  // useState([]) () => {}
  return (
    <div>
      <img src={userInfo.avatar} />
      <h1
        onClick={() => {
          setCount(() => {
            return count + 1
          })
        }}
      >
        {count}
      </h1>
      <Button
        onClick={() => {
          setOpt(() => {
            return { ...opt, page: opt.page + 1 }
          })
          // setOpt({ ...opt, page: opt.page + 1 })
        }}
      >
        按钮{opt.page}: {opt.size}
      </Button>
    </div>
  )
}

export default Home
